<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/WEB-INF/view/common/common.jsp" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>拉勾首页</title>
		<link rel="stylesheet" href="${url }/vendor/font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" href="${url }/css/header.css" />
		<link rel="stylesheet" href="${url }/css/common.css" />
		<link rel="stylesheet" href="${url }/css/index.css" />
		<link rel="stylesheet" href="${url }/css/select-city.css" />
		<link rel="Shortcut Icon" href="${url }/img/favicon.ico">
	</head>

	<body>
 	<%--静态 <%@ include file="/WEB-INF/view/common/header.jsp" %> --%>
 	<jsp:include page="/WEB-INF/view/common/header.jsp">
			<jsp:param value="yes" name="city"/>
		</jsp:include>
		<div class="index-wrapper" id="wrapper">
			<div class="float-wrapper">
				<div class="wrap-header">
					<span>切换城市</span>
					<span id="close" style="float: right;font-size: 30px;cursor: pointer;">x</span>
				</div>
				<div class="changecity-header">
					<span style="font-size:22px;">亲爱的用户您好：</span><br /><br />
					<span>切换城市分站，让我们为您提供更准确的职位信息。</span>
				</div>
				<div class="city-wrapper">
					<ul id="citys">
						<li>
							<a href="${url }/javascript:void(0)" class="active">全国站</a>
						</li>
						<li>
							<a href="${url }/javascript:void(0)">北京站</a>
						</li>
						<li>
							<a href="${url }/javascript:void(0)">上海站</a>
						</li>
						<li>
							<a href="${url }/javascript:void(0)">杭州站</a>
						</li>
						<li>
							<a href="${url }/javascript:void(0)">广州站</a>
						</li>
					</ul>
				</div>
				<div class="float-footer">其他城市正在开通中，敬请期待~</div>
			</div>
		</div>
		
		<div class="index-main">
			<ul class="sidebar">
			<c:forEach items="${tradelist }" var="trade">
				<li class="sidebar-item">
					<h3>${ trade.tradeName}<span class="icon fa fa-angle-right"></span></h3>
					<ul class="item-bar">
					<c:forEach items="${ trade.hotTreadPositionList}" var="hottreadposition"> <!--热门行业  -->
						<li>
							<a href="#">${hottreadposition.name }</a>
						</li>
						</c:forEach>
					</ul>
					<ul class="item-list">
					<c:forEach items="${trade.tradeTechAndPositionMap }" var="tradeTechMap">
						<li class="list-details">
							<span class="title">${tradeTechMap.key}</span>
							<ul class="content-details">
							<c:forEach items="${tradeTechMap.value }" var="tradeTechMapValue">
								<li class="details-item">
									<a href="${url }/">${tradeTechMapValue.name }</a>
								</li>
								</c:forEach>
							</ul>
						</li>
						</c:forEach>
					</ul>
				</li>
				</c:forEach>
			</ul>

			<div class="index-main-right">
				<div class="index-header">
					<form action="${url }/pub/Pub/indexquery.action">
						<div class="index-header-text">
							<input type="text"  name="positionEntity.name" value="${positionEntity.name }"  style="width:580px;height:40px;line-height: 40px;padding-left: 10px;font-size:18px;border:none;outline: #00B38A;" placeholder="搜索职位/公司" autofocus="autofocus" />
						</div>

						<div class="index-header-search">
							<input type="submit" value="搜索" style="width:155px;height:40px;background: #00B38A;color:white;font-size:20px;line-height:40px;border:none;cursor: pointer;" />
						</div>
					</form>
				</div>

				<div class="index-menu">
					<ul>
						<li><span class="hot-search">热门搜索:</span></li>
						<li>
							<a href="${url }/">文案策划</a>
						</li>
						<li>
							<a href="${url }/">市场总监</a>
						</li>
						<li>
							<a href="${url }/">PHP</a>
						</li>
						<li>
							<a href="${url }/">数据分析</a>
						</li>
						<li>
							<a href="${url }/">产品经理</a>
						</li>
						<li>
							<a href="${url }/">平面设计师</a>
						</li>
						<li>
							<a href="${url }/">技术总监</a>
						</li>
						<li>
							<a href="${url }/">测试</a>
						</li>
						<li>
							<a href="${url }/">拉勾APP</a>
						</li>
					</ul>
				</div>

				<div class="index-contain">
					<div class="index-contain-left" id="index-contain-left">
						<div class="index-banner" id="index-banner">
							<a href="${url }/https://pai.lagou.com/index.html" target="_blank"><img src="${url }/img/index8.JPG" /></a>
							<a href="${url }/https://www.lagou.com/app/download.html" target="_blank"><img src="${url }/img/index9.JPG" /></a>
							<a href="${url }/https://yanzhi.lagou.com/" target="_blank"><img src="${url }/img/index10.JPG" /></a>
						</div>
					</div>

					<div class="index-contain-right">
						<span></span>
						<div class="contain-right-image">
							<div class="image-item image1 "></div>
						</div>

						<div class="contain-right-image">
							<div class="image-item image2"></div>
						</div>

						<div class="contain-right-image">
							<div class="image-item image3"></div>
						</div>
					</div>
				</div>

				<div class="index-content">
					<div class="example">
						<img src="${url }/img/index16.png" />
						<div class="intro">
							<p class="intro-title">搜房网</p>
							<p class="intro-brief">上市公司 中国最大的房地产专业研究机构</p>
						</div>
					</div>

					<div class="example">
						<img src="${url }/img/index17.png"/>
						<div class="intro">
							<p class="intro-title">蜂窝煤</p>
							<p class="intro-brief">中国领先的服务行自由平台</p>
						</div>
					</div>

					<div class="example">
						<img src="${url }/img/index18.png"/>
						<div class="intro">
							<p class="intro-title">之间网</p>
							<p class="intro-brief">丰厚的薪酬！舒适的办公环境！广阔的发展平台！</p>
						</div>
					</div>

					<div class="example">
						<img src="${url }/img/index19.jpg"/>
						<div class="intro">
							<p class="intro-title">尚娱网络</p>
							<p class="intro-brief">给你想要的！</p>
						</div>
					</div>

					<div class="example">
						<img src="${url }/img/index20.jpg" />
						<div class="intro">
							<p class="intro-title">DataHu</p>
							<p class="intro-brief">洞见数据价值</p>
						</div>
					</div>

					<div class="example">
						<img src="${url }/img/index21.png" />
						<div class="intro">
							<p class="intro-title">闪签科技</p>
							<p class="intro-brief">让每个人更有价值的存在</p>
						</div>
					</div>
				</div>

				<ul class="index-bar">
					<li class="new-position active">最新职位</li>
					<li class="hot-position">热门职位</li>
				</ul>

				<ul class="position-wrapper active" id="new-position-wrapper">
				
					<c:forEach items="${latestPostionList }" var="position">
						<li class="position-item">
							<div class="position-item-left">
								<div class="position-city">
									<a href="${url}/pub/Pub/PositionDetails.action?position.id=${position.id}" title="${position.name }[${position.province$name }-${position.city$name }]">${position.name }[${position.province$name }-${position.city$name }]</a><time><fmt:formatDate value="${position.publishTime }" pattern="yyyy-MM-dd HH:mm"/></time></div>
								<span class="money">${position.salaryBegin }-${position.salaryEnd }</span>
								<span class="qualifications">${position.workExperienceStr }/${position.educationStr }</span>
							</div>
							<div class="position-item-right">
								<a href="${url}/" class="company-name">${position.company$name }</a>
								<span class="type">${position.trade$name } / ${position.company$nature }</span>
							</div>
							<div class="position-item-footer">
								<ul class="gift">
									<c:forEach items="${position.treatments}" var="treatment" begin="0" end="3">
										<li class="gift-item">${treatment }</li>
									</c:forEach>
								</ul>
								<span class="brief">${position.company$purpose }</span>
							</div>
						</li>
					</c:forEach>
				</ul>
				<ul class="position-wrapper" id="hot-position-wrapper">
					<li class="position-item">
						<div class="position-item-left">
							<div class="position-city">
								<a href="position.html">新媒体运营[深圳]</a><span>2016-09-08</span></div>
							<span class="money">4k-8k</span>
							<span class="qualifications">经验不限/本科</span>
						</div>

						<div class="position-item-right">
							<a href="" class="company-name">木光</a>
							<span class="type">移动互联网,社交网络 / 初创型(未融资)</span>
						</div>

						<div class="position-item-footer">
							<ul class="gift">
								<li class="gift-item">节日礼物</li>
								<li class="gift-item">节假日</li>
							</ul>
							<span class="brief">五险一金，帅哥美女多，可以接触各种大牛</span>
						</div>
					</li>
				</ul>

				<a href="${url }/pub/Pub/CompanyPositionSearch.action"><div class="look">查看更多<img src="${url }/img/z1.png" class="doc" /></div></a>
			</div>
		</div>

		<%@ include file="/WEB-INF/view/common/footer.jsp" %>
		<script src="${url }/vendor/jquery.min.js"></script>
		<script src="${url }/vendor/jquery.cookie.js"></script>
		<script src="${url }/vendor/sHover.min.js"></script>
		<script src="${url }/js/common.js"></script>
		<script src="${url }/js/select-city.js"></script>
		<script src="${url }/js/index.js"></script>
		
		<script>
			var example = new sHover("example", "intro");
		</script>
	</body>

</html>
